<template>
  <div class="new-eva-personnel">
    <el-dialog title="新建活动"
               @close="closeAdd"
               :visible.sync="newActiveDialog"
               width="40%"
               :rules="rules">
      <el-row>
        <el-form :model="requestParams"
                 :rules="rules"
                 ref="requestParams"
                 label-width="90px">
          <el-col :sapn="24">
            <el-form-item label="活动名称"
                          prop="title">
              <el-input v-model="requestParams.title"
                        placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sapn="24">
            <el-form-item label="问卷名称"
                          prop="exercise_id">
              <el-select v-model="requestParams.exercise_id"
                         placeholder="请选择问卷名称">
                <el-option v-for="(option,index) in testListArr"
                           :key="index"
                           :value="option.exercise_id"
                           :label="option.exercise_name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sapn="24"
                  class="bottom-box">
            <el-button @click='onCancel'>取消</el-button>
            <el-button type="primary"
                       @click="onNext('requestParams')">下一步</el-button>
          </el-col>
        </el-form>
        <!-- 新建被评价人员 -->
        <NewEvaPersonnelDialog v-if="childDialog==true"
                               :topStepParams.sync="requestParams"
                               :childDialog.sync="childDialog"></NewEvaPersonnelDialog>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import NewEvaPersonnelDialog from './NewEvaPersonnelDialog';
export default {
  components: {
    NewEvaPersonnelDialog,//新增被评价人员
  },
  props: {
    callBack: Function,
    testListArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    newActDialog: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      childDialog: false,
      requestParams: {
        title: '',
        exercise_id: '',
      },
      rules: {
        title: [
          { required: true, message: '活动名称不能为空', trigger: ['change', 'blur'] }
        ],
        exercise_id: [
          { required: true, message: '问卷名称不能为空', trigger: ['change', 'blur'] }
        ]
      },
      newActiveDialog: false,
    }
  },
  methods: {
    onNext (data) {//保存
      this.$refs[data].validate((valid) => {
        if (valid) {
          this.childDialog = true;
          // this.closeAdd();
        } else {
          return false;
        }
      })
    },
    closeAdd () {
      this.$emit('update:newActDialog', false);
      this.$refs["requestParams"].resetFields();//表单重置
    },
    onCancel () {//取消
      this.closeAdd();//关闭弹框
    },

  },
  watch: {
    requestParams (n, o) {
      if (n.exercise_id == undefined) {
        this.$emit('update:newActDialog', false);
        this.callBack();
      }
      // console.log('w requestParams=', this.requestParams)
    },
    newActDialog (n, o) {
      this.newActiveDialog = n;
    }
  },
  created () {
    this.newActiveDialog = this.newActDialog;
  }
}
</script>

<style lang="scss" scoped>
.new-eva-personnel {
}
.bottom-box {
  margin-top: 20px;
  text-align: right;
}
</style>